<template>
	<div class="default-main">

		<cus-form id="slow-sql-form" collapsable icon="fa fa-search" label="搜索">
			<template #title-after>
				<el-button icon="el-icon-Search" size="small" type="primary" @click.stop="handleSearch">
					搜索
				</el-button>
				<el-button icon="el-icon-Refresh" size="small" type="primary" @click.stop="resetSearch">
					重置
				</el-button>
			</template>
			<template #form>
				<el-form ref="searchForm" :model="params" label-width="auto">
					<el-row :gutter="20" justify="space-between">
						<el-col :span="8">
							<el-form-item label="数据库名称">
								<el-input v-model="params.db_like" clearable placeholder="模糊查询" @keyup.enter="handleSearch"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="sql内容">
								<el-input v-model="params.sqlText_like" clearable placeholder="模糊查询" @keyup.enter="handleSearch"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="查询耗时不小于(s)">
								<el-input-number v-model="params.minQueryTime" :max="MAX_INTEGER" :min="0" :precision="6" :step="0.000001" class="w100"
								                 controls-position="right" step-strictly @keyup.enter="handleSearch"/>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</template>
		</cus-form>

		<cus-table-title id="slow-sql-table-title" icon="fa fa-database" label="慢查询日志"/>
		<el-table id="slow-sql-table" ref="tableRef" v-loading="tableLoading" :data="slowSqlTableData" :header-cell-class-name="handleHeaderCellClass"
		          :max-height="tableMaxHeight" border class="cus-table" fit highlight-current-row
		          @sort-change="elTableSortChange($event, params.orderby, handleSearch)">
			<el-table-column align="center" fixed="left" label="序号" width="60">
				<template v-slot="scope">
					{{ initTableIndex(pageRef, scope.$index) }}
				</template>
			</el-table-column>
			<el-table-column align="center" label="startTime" prop="startTime" sortable="custom" width="220"></el-table-column>
			<el-table-column align="center" label="userHost" prop="userHost" width="200"></el-table-column>
			<el-table-column align="center" label="queryTime" prop="queryTime" sortable="custom" width="140"></el-table-column>
			<el-table-column align="center" label="lockTime" prop="lockTime" sortable="custom" width="120"></el-table-column>
			<el-table-column align="center" label="rowsSent" prop="rowsSent" sortable="custom" width="120"></el-table-column>
			<el-table-column align="center" label="rowsExamined" prop="rowsExamined" sortable="custom" width="160"></el-table-column>
			<el-table-column align="center" label="db" prop="db" width="100"></el-table-column>
			<el-table-column align="center" label="lastInsertId" prop="lastInsertId" width="110"></el-table-column>
			<el-table-column align="center" label="insertId" prop="insertId" width="80"></el-table-column>
			<el-table-column align="center" label="serverId" prop="serverId" width="85"></el-table-column>
			<el-table-column align="center" label="sqlText" prop="sqlText"></el-table-column>
			<el-table-column align="center" label="threadId" prop="threadId" sortable="custom" width="110"></el-table-column>
		</el-table>
		<cus-pagination id="slow-sql-pagination" ref="pageRef" v-model="slowSqlTableData" v-model:loading="tableLoading" :pageSize="10" :params="params"
		                url="/system/slow-sql/readOnly/getAllSlowSql"/>

	</div>
</template>

<script lang="ts" name="SlowSql" setup>

import CusTableTitle from '@/components/cus-table-title.vue'
import CusPagination from '@/components/cus-pagination.vue'
import {elTableHeaderCellClassName, elTableSortChange, initTableIndex} from '@/utils/commonUtil'
import {onActivated, onMounted, reactive, ref} from 'vue'
import {MAX_INTEGER} from '@/utils/constantsUtil'
import {debounce, type DebouncedFunc} from 'lodash-es'
import {calcMaxHeight} from '@/utils/layoutUtil'
import {useEventListener} from '@vueuse/core'
import {onBeforeRouteLeave} from 'vue-router'
import type {TableColumnCtx} from 'element-plus'
import CusForm from '@/components/cus-form.vue'

const pageRef = ref(),
		tableRef = ref(),
		params = reactive<SearchSlowLogRequest>({
			db_like: undefined,
			sqlText_like: undefined,
			minQueryTime: undefined,
			orderby: []
		}),
		tableMaxHeight = ref<number>(800),
		slowSqlTableData = ref<SlowLog[]>([]),
		tableLoading = ref(false),
		getTableMaxHeight: DebouncedFunc<() => typeof getTableMaxHeight> = debounce(() => {
			tableMaxHeight.value = calcMaxHeight('#slow-sql-form', '#slow-sql-table-title', '#slow-sql-pagination')
			return getTableMaxHeight
		}, 100, {
			leading: true,
			trailing: false,
			maxWait: 100
		}),
		handleHeaderCellClass = (args: { rows: SlowLog[], column: TableColumnCtx<SlowLog>, rowIndex: number, columnIndex: number }) => {
			elTableHeaderCellClassName(args, params.orderby)
		},
		handleSearch = () => {
			pageRef.value.reload()
		},
		resetParams = () => {
			params.db_like = undefined
			params.sqlText_like = undefined
			params.minQueryTime = undefined
			params.orderby = []
			// 清除多列的排序状态
			for (const column of tableRef.value?.store.states.columns.value) {
				column.order = null
			}
		},
		resetSearch = () => {
			resetParams()
			handleSearch()
		}

onMounted(() => {
	useEventListener(window, 'resize', getTableMaxHeight()!)
})

// 该页面开启缓存且首次或后续进入时执行，刷新页面不执行
onActivated(() => {
	useEventListener(window, 'resize', getTableMaxHeight()!)
})

onBeforeRouteLeave(() => {
	window.removeEventListener('resize', getTableMaxHeight)
})

</script>

<style lang="scss" scoped>
</style>
